<template>
	<el-menu v-bind="$attrs">
		<template v-for="item of data" :key="item.id">
			<el-sub-menu :index="item.id" v-if="item.children">
				<template #title>
					<my-icon :icon="item?.meta?.icon"></my-icon>
					<span>{{ item.meta.title }}</span>
				</template>
				<menu-list :list="item.children"></menu-list>
				<!--递归调用-->
			</el-sub-menu>
			<el-menu-item :index="item.path" v-else-if="item.menuType !== 'M'">
				<my-icon :icon="item?.meta?.icon"></my-icon>
				<span>{{ item.meta.title }}</span>
			</el-menu-item>
		</template>
	</el-menu>
</template>

<script setup name="MyMenu">
import MenuList from './MenuList.vue';
/**
 * 菜单组件
 * @module components/my-menu
 */
defineProps({
	// 菜单数据
	data: {
		type: Array,
		required: true,
		default() {
			return [];
		}
	}
});
</script>
